<template>
  <view class="success-container">
    <view class="top-color"></view>

    <!-- 内容容器，模拟白色卡片 -->
    <view class="content-box">
      <!-- 成功图标 -->
      <image class="success-icon" src=""></image>
      <!-- 提示文字 -->
      <text class="success-text">添加成功</text>
      <!-- 返回按钮 -->
      <button class="back-btn">返回</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 可根据实际需求补充数据
    };
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1
      });
    }
  }
};
</script>

<style scoped>
.success-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100vh;
  background-color: #f5f5f5;
  position: relative;
  z-index: 1;
}

.top-color {
  position: absolute;
  background-color: #3399ff;
  height: 300rpx;
  width: 100%;
  z-index: 2;
}

.content-box {
  position: absolute;
  width: 90%;
  height: 600rpx;
  background-color: white;
  border-radius: 20rpx;
  margin: 100rpx 5% 0 5%;
  z-index: 3;
}

.back-arrow {
  font-size: 44rpx;
  color: #ffffff;
}

.page-title {
  font-size: 36rpx;
  color: #ffffff;
  font-weight: bold;
}

.menu-icon {
  display: flex;
  align-items: center;
  color: #ffffff;
}

.circle-icon {
  margin-left: 15rpx;
  font-size: 38rpx;
}



.success-icon {
  width: 100rpx;
  height: 100rpx;
}

.success-text {
  font-size: 32rpx;
  margin-top: 20rpx;
  margin-bottom: 30rpx;
}

.back-btn {
  width: 200rpx;
  background-color: #3399ff;
  color: #ffffff;
  font-size: 28rpx;
  padding: 20rpx 0;
  border-radius: 30rpx;
}
</style>